<template>
	<view class="list">
		<view class="list-nik">
			<view v-for="(item, index) in city" :key="index">
				<view class="list-item" @click="itemClick(item)">
					<span>{{item}}</span>
					<u-icon name="arrow-right" color="#BFBFBF" size="28"></u-icon>
				</view>
			</view>
			<view v-if="city.length === 0" style="margin-top: 100rpx;"><u-empty text="不好意思,没有找到你所需要数据~" mode="data"></u-empty></view>
		</view>
	</view>
</template>

<script>
	import city from '../../../../utils/city.js'
	export default {
		data () {
			return {
				city: []
			}
		},
		props: ['searchKey'],
		mounted () {
			let arr = []
			let arr1 = ['北京市', '天津市', '上海市', '重庆市']
			let arr2 = []
			// 0 、1、8、21
			delete city[0]
			delete city[1]
			delete city[8]
			delete city[21]
			city.map(item1 => {
				item1.map(item2 => {
					arr2.push(item2.label)
				})
			})
			arr = [...arr1, ...arr2]
			arr = arr.filter(item => {
				return item.indexOf(this.searchKey) > -1
			})
			this.city = arr
		},
		methods: {
			itemClick (item) {
				uni.setStorageSync('address', item)
				this.$emit('searchClick', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item{
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 2rpx solid #EEEEEE;
	}
	.list-nik{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.list{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
